|
HTML에 스타일(CSS) 사용하기
1. 스타일 시트 이해하기
css에 대한 여러 가지 설명은 뒤로 미루고 css를 사용하므로서 어떤 작업이 편리해 지는가를 단적으로 보여주는 지를 표를 소스와 표를 통해서 살표 보도록 하겠습니다.
html에 테이블 태그를 많이 사용해 본 사람이라면 테이블 태그 안에서 폰트 지정이 얼마나 번거로운가에 대해서 이미 알고 있을 것입니다. 테이블 태그 안에서 폰트 지정은 각각의 컬럼마다 일일이 지정해야 합니다.
다음 표안에서 테이블을 만들기 위해서는 소스에서 보여지는 것처럼 각 컬럼을 정의하는 <TD> 태그 안에 글자 크기2, 색상 파랑, 진하게 지정하는 태그를 일일이 삽입해야 합니다.
|
<html>
<head>
<title>ㅅ ㅓ랍속 ㄴ ㅔ모상ㅈ ㅏ</title>
</head>
<body>
<table align=center>
<tr><td><b><font size="2" color="#0000FF">곡명</font></b></td>
<td><b><font size="2" color="#0000FF">작사/작곡</font>
</b></td></tr>
<tr><td><b><font size="2" color="#0000FF">1. 흐린 가을 하늘에 편지를 써</font></b></td>
<td><b><font size="2" color="#0000ff">김창기 작사/작곡</font>
</b></td></tr>
<tr><td><b><font size="2" color="#0000ff">2. 새장속의 친구</font>
</b></td>
<td><b><font size="2" color="#0000FF">유준열 작사/작곡</font>
</b></td></tr>
<tr><td><b><font size="2" color="#0000FF">3. 동물원</font>
</b></td>
<td><b><font size="2" color="#0000ff">김창기 작사/작곡</font>
</b></td></tr>
<tr><td><b><font size="2" color="#0000ff">4. 이별할 때</font>
</b></td><td><b><font size="2" color="#0000ff">박경찬 작사/작곡</font>
</b></td></tr>
<tr><td><b><font size="2" color="#0000ff">5. 별빛 가득한 밤에</font></b></td>
<td><b><font size="2" color="#0000ff">박기영 작사/작곡</font></b></td></tr>
<tr><td><b><font size="2" color="#0000ff">6. 잘가</font></b></td>
<td><b><font size="2" color="#0000ff">박기영 작사/작곡</font></b</td></tr>
<tr><td><b><font size="2" color="#0000ff">7. 길 잃은 아이처럼</font></b></td>
<td><b><font size="2" color="#0000ff">유준열 작사/작곡</font></b></td></tr>
<tr><td><b><font size="2" color="#0000ff">8. 혜화동</font></b></td>
<td><b><font size="2" color="#0000ff">김창기 작사/작곡</font></b></td></tr>
</table>
</body>
</html> |
|
<html>
<head>
<title>ㅅ ㅓ랍속 ㄴ ㅔ모상ㅈ ㅏ</title>
<style type="text/css">
td{font-size:9pt; font-weight: bold; color:#0000ff}
</style>
</head>
<body>
<table align=center>
<tr><td>곡명</td><td>작사/작곡</td></tr>
<tr><td>1. 흐린 가을 하늘에 편지를 써</td><td>김창기 작사/작곡
</td></tr>
<tr><td>2. 새장속의 친구</td><td>유준열 작사/작곡</td></tr>
<tr><td>3. 동물원</td><td>김창기 작사/작곡</td></tr>
<tr><td>4. 이별할 때</td><td>박경찬 작사/작곡</td></tr>
<tr><td>5. 별빛 가득한 밤에</td><td>박기영 작사/작곡</td></tr>
<tr><td>6. 잘가</td><td>박기영 작사/작곡</td></tr>
<tr><td>7. 길잃은 아이처럼</td><td>유준열 작사/작곡</td></tr>
<tr><td>8. 혜화동</td><td>김창기 작사/작곡</td></tr>
</table>
</body>
</html> |
|
곡명 |
작사/작곡 |
| 1. 흐린 가을 하늘에 편지를 써 |
김창기 작사/작곡 |
| 2. 새장속의 친구 |
유준열 작사/작곡 |
| 3. 동물원 |
김창기 작사/작곡 |
| 4. 이별할 때 |
박경찬 작사/작곡 |
| 5. 별빛 가득한 밤에 |
박기영 작사/작곡 |
| 6. 잘가 |
박기영 작사/작곡 |
| 7. 길잃은 아이처럼 |
유준열 작사/작곡 |
| 8. 혜화동 |
김창기 작사/작곡 |
CSS란 Cascading Style Sheet의 약자입니다. 쉽게 표현하자면 한글의 스타일 기능이나 MS 워드의 유형과 같은 기능이라 할수 있습니다. 문자의 색상, 크기, 모양, 글자 사이의 간격, 문단 모양 등 특정 이름으로 미리 정의해 놓고 사용하는 기능입니다.
예를 들어 어떤 html 전체 글자 모양을 지정할 때 우리는 보통 다음과 같이 지정하고 사용합니다.
<body text=aqua link=blue vlink=red>
이와 같이 지정하면 문서 전체에 적용되는 문자 색상은 aqua(하늘색)가 되고 link 색상은 파랑색, 링크된 부분 중 이미 방문 했던 곳인 경우 빨강색으로 표시가 됩니다. 그러나 이 body 태그 안에 글자의 크기나 글자의 모양(bold, italic, underline 등)을 지정할 수는 없습니다. 그러나 css를 이용하면 다양하게 지정할 수가 있습니다. 또 일반적인 태그를 이용해서는 행간의 폭을 지정할 수도 없고, 자간의 폭을 지정할 수도 없었습니다. 그러나 css를 이용해서는 이러한 것이 가능합니다. 그 외에도 일반 태그로는 표현 불가능한 여러 가지 표현이 가능합니다.
2. CSS 역사와 자료를 구할수 있는 곳
css는 95년 10월 처음 제안되어 96년 10월 w3c에 의해 css1이 정식으로 추천 되었습니다.(http://www.w3.org/pub/WWW/TR/REC-CSS1)
일반 태그로는 표현이 불가능한 강력한 기능으로 여러 매체에서 극찬을 아끼지 않은 css는 html editor인 HotDog, HomeSite, WebMaker, 드림위버, 나모... 등에서도 채용이 되어 사용되고 있습니다.
그러나, 아직 여러 가지 문제점이
있습니다. w3c에서 css 표준을 발표하였으나 넷스케이프는 이를 완전히 따르지 않고 일부분은 독자적인 표현을 사용합니다.
그러나 기본적인 css 개념이나 정의법이 확연히 틀리지는 않습니다. 다만 w3c에서 발표된 표준이 두 브라우저에서 완벽하게
적용되지 않는 다는 점을 염두에 두고 css를 사용하기 바랍니다.
css에 대한 좀더 자세한 자료를 구하고자 한다면 "http://www.w3.org.Style/css/"를 참고 하시기 바랍니다. 많은 자료를 구할수 있습니다.
3. CSS를 html에 삽입하는 방법
css 정의 부분을 삽입하는 방법은 4가지로 구분할수 있습니다.
|
<html>
<head>
<title>ㅅ ㅓ랍속 ㄴ ㅔ모상ㅈ ㅏ</title>
<style type="text/css">
body {fong-size: 12pt;
font-color: aqua;
}
h1 {font-size:20pt;
font-color:blue;
}
</style>
</head>
<body>
내용
</body>
</html> |
|
<html>
<head>
<title>제목</title>
<style type="text/css">
@import url(http://www.interpia.net/~pharosit/coo1.css) ;
</style>
</head>
<body>
내용
</body>
</html> |
|
<html>
<head>
<title>ㅅ ㅓ랍속 ㄴ ㅔ모상ㅈ ㅏ</title>
<body>
<p style="color: blue">이 스타일은 문자의 색상을 파랑으로 정의 합니다.
</p>
</body>
</html> |
위의 네가지 방법 중 어떤 것을 사용해도 무방하나 첫 번째 방식이 가장 많이 사용되기도 합니다.
스타일의 정의 방식은 기본적으로 다음과 같습니다.
body { font-size: 10pt;
color: blue;
}
"body"를 여기에서는 선택자(Selector)라 하고 중괄호{}로 묶여있는 부분을 선언부(Declaration)라 합니다. 선언부 중 font-size와 같은 부분을 속성(Property)이라 하고 10pt와 같은 부분을 value라 합니다. 또 속성과 Value 부분은 콜론(:)으로 구분하며, 선언할 속성이 많아지면 각각은 세미콜론(:)으로 구분합니다.
선택자(Selector)는 body, h1, table 등 html 태그로 사용되는 것은 거의 사용될 수 있으며, 사용자가 임의로 만들어 사용할 수도 있습니다.
4. CSS에서 사용 가능한 속성
font 속성
- font family
사용법 : {font-family: 문자체} 문자체를 지정합니다.
초기치 : 각 브라우저의 설정 상태에 따라 결정.
예 : P {font-family: serif}
B {font-family: Arial}
H1 {font-family: 궁서체}
- font style
사용법 : {font-style: mormal I italic I oblique}
문자의 형태를 지정합니다. normal은 보통 모양, italic과 oblique는 기울임 모양입니다.
초기치 : normal
예 : P {font-style: italic}
- font Weight
사용법 : {font-weight: normal I bold I bolder I lighter}
문자의 전하기를 지정합니다.
초기치 : normal
예 : .wt1 {font-weiht:bold}
.wt2 {font-weight:bolder}
.wt3 {font-weight:lighter}
- font size
사용법 : {font-size: 크기}
문자의 크기를 지정합니다. 크기의 단위는 pt(point), in(inches),
centimeters(cm), pixels(px)을 쓸 수 있고, 절대 크기도 xx-small, x-small,
small, medium, large, x-large, x-large 중 하나를 지정할 수 있습니다.
초기치 : medium
예 : OL {font-size:large}
TD {font-size:10pt}
- font
사용법 : {font:font-style font-weight font-size/line-height font-family}
문자에 관련된 속성을 속성명을 빼고 지정값만을 나열하여 나타냅니다.
예 : P {font: italic bold 12pt/14pt arial}
Color, Background 속성
- color
사용법 : {color:색상명}
문자의 색상을 지정해 줍니다. 색상명이나 #RRGGBB 모두 사용 가능합니다.
초기치 : 브라우저에 의해서 결정 됩니다.
예 : H1 { color: blue}
OL { color: #ff0000}
- background color
사용법 : {background-color: 색상명 }
문단이나 화면 전체의 배경색을 지정합니다.
예 : BODY { background-color: yellow }
B {background-color: acua}
- background-image
사용법 : {background-image: url(파일명) }
문단이나 화면 전체에 배경 이미지를 넣어 줍니다.
예 : BODY {background-image: url(soo.gif)}
P.x1 {background-image: url(soo.gif)}
- background-repeat
사용법 : {background-repeat: repeat I repeat-x I repeat-y I no-repeat
배경 이미지를 전체에 반복시킬 것인가를 지정합니다.
repeat는 반복하고자 할때 지정.
repeat-x는 가로로 한번만 반복시킴.
repeat-y는 세로로 한번만 반복 시킴.
no-erpeat는 배경이미지를 반복시키지 않고 단 한번만 나타냄.
초기치 : repeat
예 : BODY {background-image: url(soo.gif);
background-repeat: no-repeat}
- background-position
사용법 : {background-position:가로위치 세로위치}
배경 이미지의 위치를 지정합니다. 위치의 지정은 다음과 같습니다.
top left = left top =0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
가로와 세로위치를 지정하며 %로 표기된 것은 영역내의 이미지 시작 위치.
예 : P {background-image: url(zoologo_jpg) no-repeat ;
background-position: center}
Text 속성
- word spacing
사용법 : {work-spacing: 수치}
단어와 단어 사이의 간격을 조절합니다.
예 : H1 {word-spacing: 0.4em }
- letter spacing
사용법 : {letter-spacing: 수치}
문자 사이의 간격을 조절합니다.
예 : H1 {letter-spacing: 0.1em}
- test decoration
사용법 : {text-decoration: none I line-through I blink}
문자에 밑줄이나 깜박임 효과를 넣어 줍니다.
예 : A:link {text-decoration:none}
-- 링크 부분에 나타나는 밑줄을 없애 줍니다.
- vertical alignment
사용법 : {vertcal-align: top I middle I bottom}
이미지 태그나 테이블 태그 등을 사용할 때 수직 정렬 속성을 지정합니다.
예 : IMG.middle {vertical-align: middle}
TD {vertical-align: bottom; )
- text alignment
사용법 : {text-align: left I right I center }
정렬 속성을 지정할 때 사용합니다.
예 : TD {text-align: right; }
.ct {text-align: center}
- text indentation
사용법 : {text-indent:수치}
문단의 emfduTMrl 폭을 지정합니다.
예 : P {text-indent: 30px}
.ind {text-indent: 30pt}
- line height
사용법 : {line-height: 수치}
한 행의 높이를 지정합니다. 이것은 행 사이 간격을 조절하는 효과가 있습니다.
예 : P.150 {line-height: 150%}
P {line-height: 40px}
Box 속성
- margin
사용법 : {margin: margin-top margin-right margin-bottom
margin-left}
박스의 여백을 지정합니다.
예 : BODY { margin: 20px } 상, 하, 좌, 우 모두 20px의 여백이 적용됨.
P { margin: 20pt 30pt} 상, 하 여백 20pt 좌, 우 여백 30pt로 적용됨.
DIV { margin: 1cm 2cm 3cm 4cm} 상1cm, 우2cm, 하3cm, 좌4cm의 여백 적용됨.
BODY {margin-top: 2in; 각각 따로따로 여백지정을 할 수 있음.
margin-bottom: 3in}
margin-left;
margin-right: 4in}
- padding
사용법 : {padding: padding-top padding-right padding-bottom
padding-left}
박스 안의 실제 내용과 테두리 사이 부분의 간격을 지정합니다.
예 : BODY {padding: 20px } 상, 하, 좌, 우 패딩 모두 20px
P { padding: 20pt 30pt} 상, 하=20pt, 좌, 우=30pt로 적용됨.
DIV { padding: 1cm 2cm 3cm 4cm } 상1cm, 우2cm, 하3cm, 좌4cm의 패딩 적용됨.
BODY {padding-top: 2in; 각각 따로 패딩 지정을 할수 있음.
padding-bottom: 3in}
padding-left: 2in;
padding-right: 4in}
- border width
사용법 : {border-width: border-top-width border-right-width
border-bottom-width border-left-width}
테두리의 폭을 지정합니다.
예 : BODY { border-width: 5px } 상, 하, 좌, 우 테두리 폭 모두 5px.
P { border-width: 6pt 6pt} 상, 하=6pt, 좌, 우=6pt로 테두리 폭 적용됨.
DIV { border-width: 1cm 2cm 3cm 4cm }
상 1cm, 우2cm, 하3cm, 좌4cm의 테두리 폭 적용됨.
BODY {border-top-width: 2in; 각각 따로따로 테두리 폭 지정을 할 수 있음.
border-right-width: 3in}
border-bottom-width: 2in;
border-left-width: 4in}
- border color
사용법 : {border-color: 색상}
테두리의 색상을 지정합니다.
예 : BODY {border-color: blue }
- border style
사용법 : {border-style: none I dotted I dashed I solid I double I groove I ridge}
테두리의 스타일을 지정합니다.
예 : P {border-style: double} -- 테두리를 이중선으로 지정합니다.
P {border-style: ridge} -- 테두리가 액자 모양으로 지정이 됩니다.(ridge=산등성이). groove도 거의 비슷함.
- border
사용법 : {border: border-width border-style color}
테두리 속성 명을 생략하고 지정값만을 표현합니다.
예 : H1 {border: groove 4px}
A:link {border: solid blue}
- width
사용법 : {width: 수치}
이미지나 INPUT, TEXTATEA, SELECT와 같은 태그 사용시 폭 지정.
예 : INPUT.button {width: 30px}
- height
사용법 : {height: 수치}
이미지나 INPUT, TEXTAREA, SELECT와 같은 태그 사용시 폭 지정.
예 : IMG.foo {width: 40px: height: 40px}
- list style type
사용법 : {list-style-type: circle I square I decimal I lower-roman I upper-roman I lower-alpha I upper-alpha I none}
<OL>이나<UL> 태그를 썼을때 지정될 글머리 표의 스타일을 지정합니다.
예 : LI.square { list-style-type: square}
OL { list -style- type: none}
list style image
사용법 : {list-style-image: url(이미지 파일명)}
목록 태그 사용시 글머리 표에 아이콘을 사용할 수 있습니다.
예 : UL.check { list-style-image: url(marker.gif)} |
